<template>
  <view class="grid-continar" :style="{ background }">
    <view class="grid-item" v-for="(item, index) in items" :key="index">
      <nut-icon font-class-name="iconfont" class-prefix="icon" :name="item.icon" :size="size" />
      <view class="grid-item-label">{{ item.label }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import { useDidShow, getStorageSync } from '@tarojs/taro'

const props = defineProps({
  background: {
    type: String,
    default: '#fff'
  },
  items: {
    type: Array,
    default() {
      return [
        { label: '电影', icon: 'movie' },
        { label: '影音VIP', icon: 'VIP' },
        { label: '话费充值', icon: 'huoguo' },
        { label: '高清资源', icon: 'coffee' }
      ]
    }
  },
  size: {
    type: Number,
    default: 38
  }
})

useDidShow(() => {
  //   setTimeout(() => {
  //     const { topBarH, windowHeight } = getStorageSync('SystemInfo')
  //     scrollH.value = windowHeight - topBarH
  //   }, 0)
})
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
.grid-continar {
  min-height: 50px;
  display: flex;
  text-align: center;
  justify-content: space-around;
  padding: 12px;
  margin: 12px 0;
  border-radius: 12px;
  box-sizing: border-box;
  .grid-item {
    flex: 1;
    .grid-item-label {
      font-size: 13px;
      font-weight: 500;
      color: $title-color;
    }
  }
}
</style>
